<template>
    <div class="main-box max-width divscroll">
      <van-row class="body-box">
          <img src="@/assets/images/head-title.png" class="pic">
      </van-row>
      <van-row class="vote-main">
          <van-row class="itme-display" v-for="(sub, index) in voteListData" :key="index">
            <van-row class="title">
              {{sub.groupName}}<span v-if="sub.excellentMaxCount!=null" style="font-size: 12px;">（优秀不超过{{sub.excellentMaxCount}}人）</span>
            </van-row>
            <!-- class="on" 是高亮 -->
            <van-row :class='["vote-box "+(items.active?"on":"")]' v-for="(items,idx) in sub.subList" :key="idx">
              <van-col>
                <van-row class="vote-top">
                  <van-col class="name">{{items.userName}}<span> - {{items.unitName}}</span></van-col>
                  <van-col class="fraction">{{items.quantifiedScore==null?'0':items.quantifiedScore}}</van-col>
                </van-row>
                
                <van-radio-group :disabled="hasVoted" id="key123"  :rules="[{ required: true, message: '请投票' }]" v-model="items.voteStatus" direction="horizontal" class="display-vote">
                <!-- <van-radio-group :disabled="hasVoted"  :rules="[{ required: true, message: '请投票' }]" v-model="items.voteStatus" direction="horizontal" class="display-vote" @change="changeVote(items,sub,index)"> -->
                  <van-radio checked-color="#29b336" :name="1" @click="changeVote(items,sub,index)">优秀</van-radio>
                  <van-radio checked-color="#29b336" :name="2" @click="changeVote(items,sub,index)">合格</van-radio>
                  <van-radio checked-color="#29b336" :name="3" @click="changeVote(items,sub,index)">基本合格</van-radio>
                  <van-radio checked-color="#29b336" :name="4" @click="changeVote(items,sub,index)">不合格</van-radio>
                </van-radio-group>
              </van-col>
              <van-col class="tag">{{idx+1}}</van-col>
            </van-row>
          </van-row>
      </van-row>
      <van-row v-if="!hasVoted" class="bnt-bottom-box">
        <van-col class="input">
         <van-checkbox v-model="checked" class="sel" @click="selectAll()">{{votetit}}</van-checkbox>
        </van-col>
        <van-button type="default" class="button"  @click="onSubmit">确定提交</van-button>
      </van-row>
      <van-popup v-model="tisBox" :close-on-click-overlay="false" style="background-color:transparent;">
        <van-row class="tisp-box">
          <van-col class="tisp-tit">消息提醒</van-col>
          <van-col class="tisp-content">
            您投票已完成
            <span>可实时查看投票结果！</span>
          </van-col>
          <van-button type="default" class="button" @click="hidePopup">马上去看看</van-button>
        </van-row>
      </van-popup>
      <div class="block_70"></div>
    </div>
  </template>
  <script>
  export default {
    name: "Home",
    data() {
      return {
        votetit:'全选合格',
        tisBox: false,
        checked: false,
        username: '',
        hasVoted: false,
        list:[],
        voteStatusList:[],
        form:{
          data: this.$route.query.data,
          // data: '8CBA4295B735AB496A4454CCA27561347A9B6C6B2C009988DFC0DFF7513FDDD68C911604AD3F9099C5599937BD212BAB',//this.$route.query.data,
          voteStatusList:[
            // {voteStatus:null,userName:null,quantifiedScore:null}
          ]
        }
      }
    },
		computed:{
			voteListData(){
				return this.list;
			}
		},
    methods: {
      onSubmit(){

        let hasVote=true;

        this.list.forEach((sub,index) => {
          sub.subList.forEach((item,idx) => {
            if(item.voteStatus==null){
              item.active = true;
              hasVote = false;
              
            }
            let params = {
              id:item.id,
              userNo:item.mobile,
              voteStatus:item.voteStatus,
              userName:item.userName,
              quantifiedScore:item.quantifiedScore
            }
            this.form.voteStatusList.push(params);
          })
          this.$set(this.list,index,sub);
        });

        
        if(!hasVote){
          this.$toast("您还有未选择的投票!");
          // this.$set(this,'list',this.list);
          this.form.voteStatusList=[];
          return 
        }

        this.$dialog.confirm({  title: '确认', message: '是否确认提交投票信息，提交后不可修改！',})
        .then(() => {
          this.$toast.loading({duration: 0, message: '提交中...', forbidClick: true,});
          // 提交请求
          this.$axios.vote.updateResult(this.form).then((res) => {
            this.$toast.clear();
            if(res.data.code==0){
              this.$toast("投票成功!");
              this.hasVoted=true;
              return ;
            }
            this.$toast(res.data.msg);
          }).catch((err) => {
            this.$toast("服务器请求失败~");
            this.$toast.clear();
          })
        })
        .catch(() => {
          // on cancel
        });


      },
      hidePopup(){
        this.tisBox = false;
      },
      changeVote(item,sub,subIndex){


        if(sub.excellentMaxCount==null)
           return;
        
        let excellentCount = sub.subList.filter(s=>s.voteStatus==1).length;
        console.log(sub)
        console.log(excellentCount)
        if(excellentCount >sub.excellentMaxCount){
          this.$toast('优秀人数不能超过'+sub.excellentMaxCount+"人");
          item.active = true;
          item.voteStatus=null;
        }else{
          item.active = false;
        }
        this.$set(this.list,subIndex,sub);

      },


      //全选合格、取消合格
      selectAll(){
        let tisp=this.checked?'全选合格':'取消全选合格';
        this.$dialog.confirm({  title: '确认', message: '是否确认'+tisp+'，'+tisp+'后之前选项也会改变！',})
        .then(() => {
          let val = this.checked?2:null;
          this.list.forEach((item,index) => {
            item.subList.forEach((items,idx) => {
              items['voteStatus'] = val;
            })
            this.votetit=this.checked?'取消全选合格':'全选合格';
          })
        }).catch(() => {
          this.checked =!this.checked;
        });

      },
      getVoteList(){
        
        this.$axios.vote.voteList({data:this.form.data}).then((res) => {
          this.list = res.data.data;

          this.list.forEach((sub,index) => {
            sub.subList.forEach((item,idx) => {
              item.active = false;
            })
           
				  });
          
        }).catch((err) => {
          // this.$toast("服务器请求失败~");
        })
      },
      userIsVoted(){
        this.$axios.vote.userIsVote({data:this.form.data}).then((res) => {
          if(res.data.data){
            this.$axios.vote.votedResultList({data:this.form.data}).then(res=>{
              this.list = res.data.data;
              this.tisBox = true;
              this.hasVoted = true;
            })
          }else{
            this.hasVoted = false;
            this.getVoteList()
          }

        }).catch((err) => {
          this.$toast("服务器请求失败~");
        })
      },

      getVoteInfo(){
        this.$axios.vote.voteInfo({data:this.form.data}).then((res) => {
          if(res.data.data){
            let vote =res.data.data;
            let currDate = new Date();
            let betweenTime = vote.beginTime>currDate || vote.endTime<currDate
            if(!vote.isPush || betweenTime){
              vote.data = this.form.data
              this.$router.push({
                  name: "tips",
                  params: { vote: vote },
              });
            }
          }

        })
      }


    },
    created() {
      //this.getVoteList();
      // this.getVoteInfo();
      this.userIsVoted();
    },
  };
  </script>
  <style lang="scss">
  .main-box{
    background-color: #e5f2ff !important;
  }
  .tisp-box{
    background-image: url('../assets/images/tisp-bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    width: 18.75rem;
    height: 23.75rem;
    background-size: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    .tisp-tit{
      font-size: $wdr-oneTitle-fontSize;
      line-height: 7.75rem;
      color: #FFF;
      font-weight: 700;
    }
    .tisp-content{
      margin-top: 5.25rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: $wdr-twoTitle-fontSize;
      font-weight: 700;
      span{
        color: $wdr-assist-fontColor;
        font-size: $wdr-main-fontSize;
        font-weight: normal;
      }
    }
    .button{
      margin-top: 3.55rem;
      background-color: #3b3fc0;
      color: #FFF;
      border-radius: 1.875rem;
      padding: 0 1.25rem;
      border: 0;
      font-weight: 700 !important;
    }
  }
  .bnt-bottom-box{
    height: 3.75rem;
    background-color: #3aa0ff;
    position: fixed;
    width: 100%;
    padding: 0 .625rem;
    bottom: 0;
    left: 0;
    display: flex;
    // justify-content: center;
    align-items: center;
    justify-content: space-between;
    .input{
      flex: 1;
      color: #FFF !important;
      font-size: $wdr-threeTitle-fontSize;
      .sel{
        display: inline-flex;
        .van-checkbox__label{
          color: #FFF !important;
        }
      }
    }
    .button{
      min-width: 9.375rem;
      height: 2.5rem;
      line-height: 2.5rem;
      border-radius: 1.25rem;
      box-shadow: 0 5px 5px -4px #1c81df;
      color: #1d92ff !important;
      .van-button__text{
        font-size: $wdr-threeTitle-fontSize;
        font-weight: 700 !important;
      }
    }
  }
  .body-box{
    background-color: transparent !important;
    background-image: url('../assets/images/head-bg.png');
    background-repeat: no-repeat;
    background-position: center -2.5rem;
    margin: 0 auto;
    height: 30.9vh;
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .pic{
      display: flex;
      width: 68vw;
      margin-top: -10vw;
    }
    // &:after{
    //   border: 0;
    // }
  }
  .vote-main{
    margin-top: -2.5rem !important;
    .itme-display{
      .title{
        background-color: #4d88ef;
        height: 2.5rem;
        line-height: 2.5rem;
        color: #FFF;
        border-radius: 1.25rem 1.25rem 0 0;
        padding: 0 .9375rem;
        font-weight: 700;
        font-size: $wdr-threeTitle-fontSize;
      }
      .vote-box{
        &.on{
          // border:1px solid red;
          box-shadow: 0 0 5px 2px red;
        }
        margin: .625rem .625rem 0 .625rem;
        background-color: #FFF;
        display: flex;
        flex-direction: column;
        border-radius: .625rem;
        position: relative;
        .tag{
          position: absolute;
          right: 0;
          background-color: #1d92ff;
          color:#FFF;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 2.5rem;
          height: 1.875rem;
          border-radius: 0 .625rem 0 .9375rem;
        }
        .display-vote{
          padding: .625rem;
        }
        .vote-top{
          display: flex;
          justify-content: space-between;
          padding: .625rem .625rem 0 .625rem;
          .name{
            flex: 1;
            color: #4d88ef;
            font-weight: 700;
            font-size: $wdr-threeTitle-fontSize !important;
            span{
              font-size: $wdr-explain-fontSize !important;
              color: $wdr-assist-fontColor !important;
              font-weight: normal;
            }
          }
          .fraction{
            color:red;
            padding-right: 2.5rem;
          }
        }
        .van-field{
          background-color: transparent !important;
        }
        .van-radio{
          font-size: $wdr-main-fontSize !important;
        }
        .van-radio:last-child{
          margin-right: 0;
        }
      }
    }
    .itme-display+.itme-display{
      margin-top: 1.25rem;
    }
  }
  </style>